/*
These styles are applicable across a number of pages of the system.
*/

/*
==================================
GENERAL PAGE LAYOUT
*/

body {
    font-family: sans-serif;
    padding: 0;
    margin: 0;
}

img {
    border: none;
}

a, a:link, a:visited, a:active, a:hover {
    text-decoration: underline;
    color: blue;
}

h1 {
    font-weight: bold;
    font-size: 18px;
}

h2 {
    font-weight: bold;
    font-size: 16px;
    color: #444;
}

.muted {
    color: gray;
}

/*
Used by the 'highlighted-text' directive.
*/
.highlighted {
    /*background-color: yellow;*/
    /*border: 1px solid rgba(215, 215, 0, 1);*/
    background-color: #ffc8fe;
    border: 1px solid rgb(255, 149, 255);
}

small {
    font-size: 10px;
}

/*
This class is used for the spinner as well as the modal dialog.  It will fill a backdrop with a dark colour and then
the spinner or the modal dialog can be shown over the top.
*/

.modal-backdrop-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1050;
}

/*
==================================
TEXT STYLING
*/

.text-error {
    color: red;
}

.text-warning {
    color: darkorange;
}

.text-success {
    color: darkgreen;
}

/*
==================================
PAGE STRUCTURE
*/

.content-container {
    /* handled by the trailer class */
    margin: 24px 5% 0;
    width: auto;
}

.footer {
    clear:both;
    margin-bottom: 32px;
}

/*
==================================
ALERT BOXES FOR USE OUTSIDE OF FORMS
*/

.alert-container {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid red;
    background-color: white;
    color: red;
    margin-bottom: 4px;
    margin-top: 4px;
}

.info-container {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid #336698;
    background-color: white;
    color: #336698;
    margin-bottom: 4px;
    margin-top: 4px;
}

.onelineform-container {
    padding: 8px;
    border: 1px solid black;
    background-color: white;
    color: black;
}

.onelineform-container form {
    margin-bottom: 0;
}

/*
==================================
FORMS
*/

label {
    width: 30%;
    display: inline-block;
    text-align: right;
    color: gray;
    line-height: 100%;
    vertical-align: top;
    margin-top:5px;
    font-weight: lighter;
}

input, textarea, select {
    font-size: 16px;
    border: 1px solid darkgray;
    padding: 2px;
}

button {
    background-color: white;
    border: 1px solid black;
    border-radius: 6px;
    font-size: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

button.main-action {
    border: 2px solid black;
}

button[disabled] {
    border: 1px solid darkgray;
    color: rgba(0, 0, 0, 0.50);
}

button.main-action[disabled] {
    border: 2px solid darkgray;
}

.form-error-container {
    padding-top: 4px;
    color: red;
}

.form-control-group {
    width: 69%;
    display: inline-block;
    line-height: 100%;
    padding-bottom: 8px;
}

/*
In a form, you may want to place some static text as one of the 'controls'.  This style helps with this.
*/

.form-control-group .form-control-group-static {
    padding: 3px;
}

.form-control-group.form-control-group-error input {
    border: 1px solid red;
}

/*
This is used to place a box above the form in order to show some alert text such as "your login has failed."
*/

.form-alert-container {
    width:69%;
    margin-left: 30%;
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid red;
    background-color: white;
    color: red;
}

.form-info-container {
    width:69%;
    margin-left: 30%;
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid #336698;
    background-color: white;
    color: #336698;
}

/*
This resides at the bottom of the form and contains the action buttons relating to the controls.
*/

.form-action-container {
    width: 69%;
    margin-left: 30%;
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid black;
}

/*
==================================
TABLE
*/

table.table-general {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
    clear: both;
}

table.table-general thead th {
    background: #444;
    color: white;
    text-align: left;
    padding: 4px;
}

table.table-general tbody td {
    padding: 4px;
}

table.table-general tbody td:nth-child(n+1) {
    border-left: 1px dotted #444;
}

table.table-general tbody tr:nth-child(even) {
    background: white;
}
table.table-general tbody tr:nth-child(odd) {
    background: #EEE;
}

table.table-general tbody tr td.timestampcell {
    width: 172px;
}

table.table-general tbody tr td.selectioncell {
    width: 32px;
    text-align: center;
}

.table-general-container {
}

.table-general-pagination-container {
    float: right;
    margin-top: 2px;
    margin-bottom: 2px;
}

/*
==================================
ANGULARJS
*/

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

/*
==================================
MODAL DIALOG
Also see "modal-backdrop-container" class above.
*/

.modal-container {
    width: 240px;
    height: 320px;
    border: 1px black solid;
    background-color: white;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -120px;
    margin-top: -160px;
}

.modal-container > .modal-content-container {
    padding: 16px;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

.modal-container > .modal-banner-container {
    background-color: #336698;
    color: white;
    height: 19px;
    border-bottom: 1px solid rgba(0,0,0,0.6);
    text-align: right;
}

/*
This deals with the close icon in the banner.
*/

.modal-container > .modal-banner-container img {
   margin-top: 3px;
    margin-right: 3px;
}

/*
==================================
SPINNER
*/

/*
This material is for the spinner; it will fill the screen will white and then put a small animation on top for
a moment.
*/

#spinner-container > div {
    width: 120px;
    margin: 0 auto;
    padding-top: 120px;
}

/*
==================================
SEARCH BAR
*/

#search-criteria-container {
    background-color: rgb(253,207,49);
    border: 1px solid black;
}

#search-criteria-container label {
    font-size: 10px;
    white-space: nowrap;
    margin: 5px;
    width: auto;
}

#search-criteria-container label::after {
    content:":";
}

#search-criteria-container input {
    font-size: 10px;
}

#search-criteria-container select {
    font-size: 10px;
}

#search-criteria-container button {
    font-size: 10px;
    background-color: rgb(253,207,49);
    border: 1px solid black;
    border-radius: 3px;
}

#search-criteria-container button[disabled] {
    border: 1px solid rgba(0, 0, 0, 0.30);
}

#search-criteria-container > div {
    display: inline-block;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:4px;
    padding-right:4px;
}

/*
Within the search criteria to break-up the sections of the search criteria, this will put a dotted line
between the sections.
*/

#search-criteria-container > div:nth-child(n+2) {
    border-left: 1px dotted black;
}

#search-results-container {
    margin-top: 20px;
}

/*
==================================
ACTIVE / INACTIVE INDICATORS -- SVG
*/

.active-indicator {
    fill: firebrick;
}

.active-indicator.active-indicator-true {
    fill: darkolivegreen;
}

/*
==================================
DATA LISTS
*/

dl dt {
    color:gray;
    float:left;
    clear:left;
    text-align: right;
    margin-right:10px;
    padding:5px;
    width:190px;
}

dl dd {
    margin:2px 0;
    padding:5px 0;
    margin-left: 200px;
}

/*
==================================
HIDE / SHOW FOR OWN DIRECTIVES
*/

.app-hide {
    display: none !important;
}

/*
==================================
PAGINATION CONTROLS
*/

.pagination-control-container {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.pagination-control-container.pagination-control-on-first a.pagination-control-left > img {
    opacity: 0.25;
}

.pagination-control-container.pagination-control-on-last a.pagination-control-right > img {
    opacity: 0.25;
}

.pagination-control-container li {
    min-width: 1.75em;
    text-align: center;
    display: inline-block;
    padding: 0;
}

.pagination-control-container > li > a,svg {
    margin-left: 4px;
    margin-right: 4px;
}

.pagination-control-container > li > a.pagination-control-currentpage {
    font-weight: bold;
    text-decoration: none;
    color: black;
}

/*
==================================
CONTEXT-MENU
This is where the user is presented with a pop-up modal that contains some options to choose from.
*/

ul.context-menu-container {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

ul.context-menu-container li {
    margin-top: 2px;
    margin-bottom: 2px;
    list-style: none;
    background-color: #eeeeee;
    padding: 4px;
}

/*
==================================
RATINGS
*/

.rating-indicator {
    vertical-align: middle;
}